<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="openBtn">打开美女图片</button>
  <button id="saveBtn">保存文件</button>
  <button id="messageBtn">弹出对话框</button>
  <img id="images" style="width:100%">
</body>
<script>
  const { dialog } = require('electron').remote
  const fs = require('fs')
  let openBtn = this.document.querySelector('#openBtn');
  let saveBtn = this.document.querySelector('#saveBtn')
  let messageBtn = this.document.querySelector('#messageBtn')
  /*
  * 选择图片 dialog.showOpenDialog API
  */
  openBtn.onclick = function () {
    dialog.showOpenDialog({
      title: '请选择你喜欢的小姐姐',
      filters: [
        {
          name: 'jpg', extensions: ['jpg']
        }
      ],
      buttonLabel: '打开美女图片'
    }).then(result => {
      let image = document.getElementById('images')
      if (!result.canceled) {
        image.setAttribute('src', result.filePaths[0])
        console.log(result)
      }
    }).catch(err => {
      console.log(err)
    })
  }

  /*
  * 保存文件
  */
  saveBtn.onclick = function () {
    dialog.showSaveDialog({
      title: '保存文件'
    }).then(result => {
      console.log(result)
      fs.writeFileSync(result.filePath, '技术胖一个前端爱好者')
    }).catch(err => {
      console.log(err)
    })
  }

  /*
  * 弹出对话框
  */
  messageBtn.onclick = function () {
    dialog.showMessageBox({
      type: 'info',
      title: '去不去由你',
      message: '是不是去东莞是不是去东莞是不是去东莞是不是去东莞是不是去东莞是不是去东莞',
      buttons: ['我要去', '去过了', 'nihao']
    }).then(result => {
      console.log(result)
    }).catch(err => {
      console.log(err)
    })
  }
</script>
</html>